<template>
	<view>
		<view :class="{dpn: isShowSearch}">
			<uni-nav-bar fixed :status-bar="true" @clickLeft="goBack" @clickRight="goCloud">
				<block slot="left">
					<image class="top-img" src="/static/image/search/back.png"></image>
				</block>
				<view class="top-search flex-box" @click="openSearch">
					<image class="search-icon" src="/static/image/search/2.png"></image>
					{{ searchTxt }}
				</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<block slot="right">
					<image class="top-img" src="/static/image/mine/r.png"></image>
				</block>
				<!-- #endif -->
			</uni-nav-bar>
			<scroll-view scroll-y="true" class="page-content">
				<view class="song-list">
					<view class="item tit">单曲</view>
					<view class="item" v-for="(item, index) in resList.songs" :key="index">
						<view class="con">
							<view class="name">{{item.name}}</view>
							<view class="desc">{{item.desc}}</view>
						</view>
						<view class="iconfont">&#xe60f;</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<search ref="search" @close="closeSearch"></search>
	</view>
</template>

<script>
	// 防抖
	function debounce(fn, wait = 10) {
		var timeout = null;
		return function() {
			if (timeout !== null) clearTimeout(timeout);
			timeout = setTimeout(fn, wait);
		}
	}
	var that = null
	import {
		apiSearch
	} from '@/apis/index.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import search from '@/components/search.vue';
	export default {
		components: {
			uniNavBar,
			search
		},
		data() {
			return {
				searchTxt: '大鱼',
				isShowSearch: false,
				resList: [],
			};
		},
		created() {
			that = this
		},
		onLoad(options) {
			this.getData(options.keyword);
		},
		methods: {
			getData(keyword) {
				var par = {
					keywords: keyword
				};
				apiSearch(par).then(res => {
					res.result.songs.forEach(item => {
						item.desc = item.artists.map(t => {
							return t.name
						}).join('/')
					})
					this.resList = res.result
				});
			},
			// 打开搜索
			openSearch() {
				this.isShowSearch = true;
				this.$refs.search.open()
			},
			// 关闭搜索
			closeSearch() {
				this.isShowSearch = false;
			},
			goBack() {
				uni.navigateBack()
			},
			goCloud() {
				uni.showToast({
					icon: 'none',
					title: '功能未开发'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dpn {
		display: none;
	}

	.top-img {
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
	}

	.top-search {
		width: 560rpx;
		/* #ifdef MP-WEIXIN */
		width: 460rpx;
		margin-left: -60rpx;
		/* #endif */
		height: 72rpx;
		margin-right: 24rpx;
		border-radius: 72rpx;
		color: #c6c6c6;
		background: #f7f7f7;
		align-items: center;
		justify-content: center;

		.search-icon {
			width: 28rpx;
			height: 29rpx;
			margin-right: 12rpx;
		}
	}

	.song-list {
		.item {
			@include flex-row-center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;

			&:before {
				position: absolute;
				content: "";
				bottom: 0;
				width: 686rpx;
				border-bottom: 1px solid #e4e4e4;
				transform: scaleY(0.5);
			}
		}

		.con {
			max-width: 80%;
		}

		.tit {
			height: 80rpx;
			padding-top: 0;
			color: #222;
			font-size: 32rpx;
			font-weight: 600;
			line-height: 80rpx;
		}

		.name {
			margin-top: 12rpx;
			margin-right: 20rpx;
			color: #222;
			line-height: 58rpx;
			font-size: 32rpx;
			@include ellipsis;
		}

		.desc {
			color: #666;
			font-size: 24rpx;
			line-height: 40rpx;
			@include ellipsis;
		}

		.iconfont {
			padding: 0 10rpx;
			line-height: 120rpx;
		}
	}
</style>
